<template>
  <div>
    <div :class="[{'false_Collapse':isCollapse},{'xs_false_Collapse_mian':xs_isCollapse},{'hidden-xs-only':true},'leftmenu']">
      <el-menu :collapse="isCollapse" :default-active="routerpath" :unique-opened='true'>
        <el-submenu :index="item.path" :key='item.name' v-if="routers&&routers.length" v-for="item in routers">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span slot="title">{{item.meta.title}}</span>
          </template>
          <template v-for="child in item.children">
            <el-menu-item :index="item.path+'/'+child.path" :key='child.name' @click='openview(`${item.path}/${child.path}`)' :disabled='child.meta.disabled'>
              <template slot="title">
                <i :class="child.meta.icon"></i>
                <span slot="title">{{child.meta.title}}</span>
              </template>
            </el-menu-item>
          </template>
        </el-submenu>
      </el-menu>

      <!-- 展开、折叠 -->
      <div @click="click_collapse" :class="[{'arrow_right':isCollapse},'arrow_left']">
        <el-tooltip v-if='!isCollapse' effect="dark" content="收起" placement="top">
          <i class="el-icon-d-arrow-left"></i>
        </el-tooltip>
        <el-tooltip v-else effect="dark" content='展开' placement="top">
          <i class="el-icon-d-arrow-right"></i>
        </el-tooltip>
      </div>
    </div>
    <!-- <transition name="el-zoom-in-center">
      <div class='xs_leftmenu hidden-sm-and-up leftmenu' v-show="xs_is_show">
      <el-menu 
      :default-active="routerpath"
      :unique-opened='false'>
          <el-submenu :index="item.path" :key='item.name'  v-if="routers&&routers.length" v-for="item in routers">
              <template slot="title">
                  <i :class="item.meta.icon" ></i>
                  <span slot="title">{{item.meta.title}}</span>
              </template>
              <template v-for="child in item.children">
                  <el-menu-item :index="item.path+'/'+child.path" :key='child.name' @click='openview(`${item.path}/${child.path}`)' :disabled='child.meta.disabled'>
                      <template slot="title">
                          <i :class="child.meta.icon" ></i>
                          <span slot="title">{{child.meta.title}}</span>
                      </template>
                  </el-menu-item>
              </template>
          </el-submenu>
      </el-menu>
    </div>
   </transition> -->
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'leftmenu',
  props: {
    // msg: String
    xs_is_show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isCollapse: false,
      xs_isCollapse: false,
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    click_collapse() {
      this.isCollapse = !this.isCollapse
      this.$emit('click_collapse', this.isCollapse)
    },
    openview(path) {
      this.xs_is_show = false
      this.$router.push({ path: path })
    },
    w() {
      let w = document.documentElement.clientWidth || document.body.clientWidth
      if (w < 768) {
        this.xs_isCollapse = true
      } else {
        this.isCollapse = false
        this.xs_isCollapse = false
      }
      if (w <= 1200) {
        this.isCollapse = true
      } else {
        this.isCollapse = false
        this.xs_isCollapse = false
      }
    }
  },
  computed: {
    ...mapGetters([
      'addRouters',
    ]),
    routerpath() {
      return this.$route.meta.no_router ? this.$route.meta.router_path : this.$route.path
    },
    routers() {
      return this.addRouters.filter((item, index, array) => {
        return (!item.hidden)
      })
    }
  },
  mounted() {
    let w = document.documentElement.clientWidth || document.body.clientWidth
    if (w < 768) {
      this.xs_isCollapse = true
    } else {
      this.isCollapse = false
      this.xs_isCollapse = false
    }
    if (w <= 1200) {
      this.isCollapse = true
    } else {
      this.isCollapse = false
      this.xs_isCollapse = false
    }
    window.addEventListener('resize', this.w)
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.leftmenu {
  overflow-x: auto;
}
</style>
